<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            background-color: pink;
            width: 100px;
            height: 100px;
        }

        .span div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            background: lightgrey;
            margin-right: 10px;
        }
    </style>
    <script>
        window.onload = function () {
            var a = document.querySelector('a');
            var btn1 = document.querySelector('.btn1');
            var btn2 = document.querySelector('.btn2');
            var btn3 = document.querySelector('.btn3');
            var div = document.querySelector('.box1');
            var diyi = document.querySelector('.diyi');
            var dier = document.querySelector('.dier');
            var js = document.querySelector('.js');
            var span1 = document.querySelector('.span1');
            var span2 = document.querySelector('.span2');
            var span3 = document.querySelector('.span3');
            var span4 = document.querySelector('.span4');
            a.onclick = function () {
                a.innerHTML = '商品的总价格是：200';
            }

            btn1.onclick = function () {
                alert('welcome mary job');
            };

            btn2.onclick = function () {
                alert('早上好');
            };
            btn3.onclick = function () {
                alert('welcome mary job');
            };

            div.onclick = function () {
                div.style.backgroundColor = 'yellow';
            }

            span1.onclick = function () {
                js.value = parseInt(diyi.value) + parseInt(dier.value);
            }
            span2.onclick = function () {
                js.value = parseInt(diyi.value) - parseInt(dier.value);
            }
            span3.onclick = function () {
                js.value = parseInt(diyi.value) * parseInt(dier.value);
            }
            span4.onclick = function () {
                js.value = parseInt(diyi.value) / parseInt(dier.value);
            }
            // 转换浮点型
            console.log(parseFloat('2.6'));
            // 转换浮点型
            console.log(parseFloat('a2.5'));
            // 转换浮点型
            console.log(parseFloat('323'));
            // 转换浮点型
            console.log(parseFloat('2e2'));
            // 转换浮点型
            console.log(parseFloat('26abc'));
        }

    </script>
</head>

<body>
    <p>点击这个按钮调用带参的函数</p>
    <button class="btn1">点击这里</button>
    <button class="btn2">在早上</button><button class="btn3">在晚上</button><br>
    <a href="javascript:;">奥利给</a><br>
    <br>
    <div class="box1">点击我变颜色</div>
    <br>
    <p>使用js实现计算器</p>
    第一个数：<input type="text" class="diyi"><br>
    第二个数：<input type="text" class="dier"><br>
    <br>
    <span class="span">
        <div class="span1">+</div>
        <div class="span2">-</div>
        <div class="span3">*</div>
        <div class="span4">/</div>
    </span><br>
    <br>
    <p>计算结果：<input type="text" class="js"></p>
</body>

</html>